<template>
	<view class="goods-detail" v-if="!empty">
		<view class="top ovh">
			<swiper :circular="true" :autoplay="false" interval="5000" duration="500">
				<swiper-item v-for="(item, keys) in goods.images" :key="keys" >
					<image :src="item" @tap="$xyfun.pi(keys,goods.images)" />
					<view class="total ts-28"><text>{{keys+1}}</text>/<text>{{goods.images.length}}</text></view>
				</swiper-item>
			</swiper>
		</view>

		<view class="info-box m-lr-30 p-tb-30 p-b-30 br-10 bg-w">
			<view class="m-lr-30">
				<view class="price-box flex">
					<view class="l flex">
						<view class="price ts-42 tb m-r-20" :style="'color:#ff5335;'">¥{{goods.price}}<span class="ts-20">积分</span></view>
						<view class="line_price ts-28 tdl m-t-15" :style="'color:#808080;'">{{goods.line_price}}积分</view>
					</view>
					<view class="r m-l-auto ts-34 " :style="'color:#333333;'">
						<text class="xyicon m-r-30 ts-32 icon-share1" :style="'color:#808080;'" @tap="showShare = !showShare"></text>
						<text class="xyicon icon-favorite" :style="goods.favorite == null ? 'color:#808080;' : 'color:#00dd83;'" @tap="onFavorite()"></text>
					</view>
				</view>
				<view class="name-box m-t-20">
					<view class="name ts-32 tb">{{goods.title}}</view>
				</view>

				<view class="tags flex m-t-20 ts-24">
					<view class="item m-r-30 br-10 bl" :style="'border-color:#ff5335;'+'color:#ff5335;'" v-for="(item,index) in goods.tags" :key="index">{{item}}</view>
				</view>

				<view class="ss flex ts-26 m-t-20" :style="'color:#808080;'">
					<view class="item">运费：0.00</view>
					<view class="item">库存：{{goods.stock}}</view>
					<view class="m-l-auto">销量：{{goods.show_sales + goods.sales}}</view>
				</view>
			</view>
		</view>

		<!-- 规格选择 -->
		<view class="sku-box m-30 flex p-tb-30 p-lr-30 br-10 bg-w" @tap="user.isLogin ? showSku = true : $xyfun.toLogin()" v-if="goods.is_sku == 1">
			<view class="l">
				<text class="title m-r-20" :style="'color:#808080;'">规格</text>
				<text class="tip">{{ currentSkuText || '请选择规格' }}</text>
			</view>
			<view class="xyicon icon-right ts-34 m-l-auto" :style="'color:#808080;'"></view>
		</view>

		<view class="detail-box m-30 p-t-30 br-10 bg-w">
			<view class="tab flex tc tb  bg-w">
				<view v-for="(item,index) in detailBoxTab" :class="'col-'+detailBoxTab.length" @tap="setDetailBoxTab(index)">
					<view :style="detailBoxTabIndex == index ? 'color:#00dd83;' : 'color:#333333;'">
						{{item}}
						<view class="line m-t-10" :style="detailBoxTabIndex == index ? 'background-color: #00dd83;' : 'background-color: #ffffff;'"></view>
					</view>
				</view>
			</view>
			<view class="m-t-25 des" v-if="detailBoxTabIndex == 0">
				<rich-text :nodes="$xyfun.richTextHandle(goods.content)"></rich-text>
			</view>

			<view class="m-t-25 comment" v-if="detailBoxTabIndex == 1">
				<xy-empty text="暂无评价" />
			</view>
		</view>

		<view class="bottom-fixed flex tc bg-w">
			<view class="p-lr-30 p-tb-15 flex tc wa">
				<button open-type="contact" class="kefu m-r-25 tc lh-32" :style="'color:#808080;'">
					<text class="xyicon icon-kefu ts-36 lh-36"></text>
					<view class="text ts-26 m-t-10 lh-28">客服</view>
				</button>

				<view class="action flex m-l-auto">
					<view class="buy ts-28 m-l-auto tc-w" :style="'background-color: #00dd83;'" @tap="goPay">
						立即购买
					</view>
				</view>

			</view>
		</view>

		<!-- 规格弹窗 -->
		<xy-goods-sku
			v-if="showSku && goods.id"
			v-model="showSku"
			:goodsInfo="goods"
			:buyType="buyType"
			:goodsType="goodsType"
			@changeType="changeType"
			@getSkuText="getSkuText"
		/>

		<!--分享组件 -->
		<xy-share v-model="showShare" posterType="goods" :posterInfo='goods' />

	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import xyEmpty from '@/components/xy-empty/index';
	import xyGoodsSku from '@/components/xy-goods/sku';
	import xyShare from '@/components/xy-share';
	import share from '@/utils/share';
	export default {
		components: {
			xyEmpty,
			xyGoodsSku,
			xyShare
		},
		data() {
			return {
				empty:true,
				id: 0,
				goods:{},
				showSku:false,
				buyType: 'sku',
				goodsType: 'goods',
				detailBoxTab:[
					'商品详情',
					//'用户评价'
				],
				detailBoxTabIndex:0,
				currentSkuText:'',
				showShare:false
			}
		},
		computed: {
			...mapState(['common','user','cart'])
		},
		async onLoad() {
			var options = this.$Route.query;

			// #ifdef MP
			if (options?.scene) {
				options = this.$xyfun.sceneDecode(options.scene);
			}
			// #endif

			if(options?.id){
				this.id = options.id;
			}
			this.loadData();
		},
		onUnload() {
			share.setShareInfo();
		},
		methods: {

			async loadData(){
				this.$api.get({
					url: '/goods/detail',
					loadingTip:'加载中...',
					data: {
						id:this.id,
					},
					success: res => {
						this.empty = false;
						this.goods = res;
						share.setShareInfo({
							title: res.title,
							desc: res.title,
							image: res.image,
							params: {
								page: 5,
								pageId: this.id
							}
						});
					}
				});
			},

			setDetailBoxTab(index){
				this.detailBoxTabIndex = index;
			},

			// 收藏
			onFavorite() {
				if (this.user.isLogin) {
					this.$api.post({
						url: '/user_favorite/add',
						data: {
							target_id:this.id,
							type:'goods'
						},
						success: res => {
							this.goods.favorite = res;
							this.$xyfun.msg(res?'收藏成功' : '取消收藏');
						}
					});
				} else {
					this.$xyfun.toLogin();
				}
			},

			// 立即购买
			goPay() {
				if (this.user.isLogin) {
					this.buyType = 'buy';
					this.showSku = true;
				} else {
					this.$xyfun.toLogin();
				}
			},

			// 组件返回的type;
			changeType(e) {
				this.buyType = e;
			},

			// 组件返回的规格;
			getSkuText(e) {
				this.currentSkuText = e;
			},


		}
	}
</script>

<style>
page{
  background-color: #f7f7f7;
}
image{
  max-width: 100%;
}
img{
  max-width: 100%;
}
</style>
<style scoped lang="scss">
	.goods-detail{
		padding-bottom: 200rpx;
		padding-top: 720rpx;
		.top{position: absolute;left: 0;top: 0;}
		.top,.top swiper{
			width: 750rpx;height: 750rpx;
			image{
				width: 750rpx;min-height: 750rpx;
			}
			.total{
				color: #fff;
				background: rgba(0, 0, 0, 0.5);
				position: absolute; right: 30rpx; bottom: 60rpx;
				padding: 3rpx 20rpx;border-radius: 20rpx;
				text{margin: 0 5rpx;}
			}
		}

		.info-box{
			z-index: 100;width: 690rpx;position: relative;
			.tags{
				.item{padding: 3rpx 10rpx;line-height: 24rpx;}
			}
			.ss{
				.item{width: 33%;}
			}
		}

		.detail-box{
			.line{
				height: 2px;width: 30%;margin-left: 35%
			}
		}

		.bottom-fixed{
			button{background: none;padding: 0;margin-left: 0;}
			button::after{border: none;}

			.cart-num{right: 0rpx;top: 0rpx;border-radius: 50%;padding: 4rpx;min-width: 24rpx;z-index: 100;min-height: 24rpx;}
			.buy,.add-cart{width: 200rpx;height: 72rpx;border-radius: 36rpx;line-height: 72rpx;}
		}
	}

</style>
